<template>
  <div>
    <!-- 按钮 -->
    <el-button :disabled="!category3Id" type="primary" size="default" @click="showAddSpuForm" icon="ele-Plus">添加SPU</el-button>

    <!-- 列表 -->
    <el-table :data="spuList" border stripe style="margin:20px 0">
      <el-table-column label="序号" align="center" width="80px" type="index"></el-table-column>
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <!-- 作用域插槽 --> <!-- 按钮 -->
        <template v-slot="{row,$index}">
          <el-button type="success" size="small" icon="ele-Plus" title="添加sku" @click="showAddSkuForm(row)"></el-button>
          <el-button type="warning" size="small" icon="ele-Edit" title="修改spu" @click="showUpdateSpuForm(row)"></el-button>
          <el-button type="info" size="small" icon="ele-InfoFilled" title="查看sku列表" @click="showSkuList(row)"></el-button>
          <el-popconfirm :title="`确定要删除${row.spuName}吗？`" @confirm="deleteSpu(row)">
              <template #reference>
                <!-- 按钮 -->
                <el-button type="danger" size="small" icon="ele-Delete" title="删除spu"></el-button>
              </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!-- @size-change="handleSizeChange" 
    @current-change="getTrademarkList"  -->
    <el-pagination 
    @size-change="handleSizeChange"
    @current-change="getSpuList" 
    style="margin-top:20px"
    v-model:current-page="page" 
    v-model:page-size="limit" 
    :total="total" 
    :pager-count="9" 
    :page-sizes="[3, 5, 7, 10]"
    layout=" prev, pager, next, jumper,->,sizes,total" />

    <!-- dialog对话框 -->
    <el-dialog :before-close="beforeClose" v-model="dialogTableVisible" :title="`${spu.spuName}的sku列表`">
      <el-table :data="skuList" v-loading="loading">
        <el-table-column label="名称" prop="skuName" />
        <el-table-column label="价格" prop="price"/>
        <el-table-column label="重量" prop="weight" />
        <el-table-column label="默认图片">
          <template v-slot="{row,$index}">
            <img :src="row.skuDefaultImg" style="width:100px;height:80px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>    
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  export default defineComponent({
    name:'SpuList'
  })
</script>
<script lang="ts" setup>
  // 引入ref 监视器watch
  import {ref,watch} from 'vue'
  // 引入store
  import {useCategoryStore} from '@/stores/category'
  // 引入 pinia 当中的 storeToRefs 用来解构store对象
  import { storeToRefs } from 'pinia';
  // 引入 api 和数据类型
  import spuApi, { type SpuData } from '@/api/spu'
  // 引入 element-plus 的 ElMessage弹框
  import { ElMessage } from 'element-plus';
  // 引入 api 和数据类型
  import  skuApi, {type SkuData } from '@/api/sku';

  /* 定义初始化分页数据 */
  const page = ref(1)   // 当前页码
  const limit = ref(3)  // 每页展示数量
  const total = ref(0)  // 总数
  // 定义spuList用来存放发送请求成功后获取到的records数据
  const spuList = ref<SpuData[]>([])

  // 创建store对象
  const categoryStore = useCategoryStore()
  // 结构获取category3Id数据
  const {category3Id} = storeToRefs(categoryStore)

  // 专门用来发请求获取spu列表的函数
  const getSpuList = async (num:number = 1) => {
    // 改变当前页码
    page.value = num
    try {
      // 传参参数 调用api发送 获取spu的分页列表 请求
      const res = await spuApi.getPageList(page.value,limit.value,category3Id.value as number)
      // 把请求发送成功获取到的records值存到当前组件当中
      spuList.value = res.records
      // 把获取到的总数存到当前组件的total中
      total.value = res.total
    } catch (error) {
      ElMessage.error('获取spu列表失败')
    }
  }

  // 监视 category3Id
  watch(category3Id,(newVal,oldVal)=>{
    if(newVal !== ''){
      /* 需要发请求的情况 */
      // 1. 一开始没有，后面有了
      // 2. 一开始有，后来值变了
      getSpuList()
    }else{
      /* 不需要发请求的情况 */
      // 1.一开始有，后面没了
      // 不需要发送请求，但是需要把列表数据清空
      spuList.value = []
    }
  },{
  // 开启立即监听
  immediate: true
})

// 切换页码的回调
// const getTrademarkList = (num:number) => {
//   // 改变当前页码
//   page.value = num
//   // 刷新页面
//   getSpuList()
// }
// 改变每页展示数量的回调
const handleSizeChange = (size:number) => {
  // 改变每页展示数量
  limit.value = size
  // 刷新页面
  getSpuList()
}

// 调用 defineEmits 函数
const emits = defineEmits(['changeState'])
// 点击添加spu按钮
const showAddSpuForm = () => {
  // 向父组件传参
  emits('changeState',2)
}
// 点击修改spu按钮
const showUpdateSpuForm = (row:SpuData) => {
  // 向父组件传参 传两个参数
  emits('changeState',2, row)
}


// 点击删除spu的操作
const deleteSpu = async (row:SpuData) => {
  try {
    // 传入参数发送aip请求
    await spuApi.deleteSpu(row.id as number)
    // 删除spu成功提示
    ElMessage.success('删除spu成功')
    // 刷新页面
    getSpuList()
  } catch (error) {
    // 删除spu失败提示
    ElMessage.error('删除spu失败')
  }
}

// 点击添加sku的按钮
const showAddSkuForm = (row:SpuData) => {
  emits('changeState',3,row)
}



// 定义 dialog 开关的初始值
const dialogTableVisible = ref(false)
// 定义用来存放展示数据的变量
const spu = ref<SpuData>({
  spuName: '',
  description: '',
  category3Id: '',
  tmId: '',
  spuSaleAttrList: [],
  spuImageList: []
})
// 定义用来存放请求发送成功存放的变量
const skuList = ref<SkuData[]>([])
// 定义loading加载效果的初始值
const loading = ref(false)
// 点击查看sku列表按钮的逻辑
const showSkuList = async (row:SpuData) => {
  // 弹出dialog对话框
  dialogTableVisible.value = true
  // 把传过来的row赋值给spu先存起来
  spu.value = row
  // 发请求前打开loading效果
  loading.value = true
  // 发送请求
  try {
    // 传入参数发送api请求
    const res = await skuApi.findBySpuId(row.id as number)
    // 把获取到的数据存起来
    skuList.value = res
  } catch (error) {
    ElMessage.error('获取sku的列表失败')
  } finally {
    // finally 无聊成功与否 都会执行

    // 发请后关闭loading效果
    loading.value = false
  }
}

// beforeClose 对话框关闭之前执行 -- 解决loading的时候上一次数据还显示的问题
const beforeClose = () => {
  /* 所有数据恢复成元素状态 */
  // 清空sku列表数据
  skuList.value = [],
  // 关闭loading
  loading.value = false
  // 关闭对话框
  dialogTableVisible.value = false
}
</script>

<style lang="less" scoped>
</style>
